<template>
  <div
      id="teamCardList"
  >
    <van-card
        v-for="team in props.teamList"
        :desc="team.description"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        :title="`${team.name} `"
    >
      <template #tags>
        <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px">
          {{
            teamStatusEnum[team.status]
          }}
        </van-tag>
      </template>
      <template #bottom>
        <div>
          {{ '队伍人数' + `${team.hasJoinNum}/${team.maxNum}` }}
        </div>
        <div>
          {{ '过期时间' + team.expireTime }}
        </div>
        <div>
          {{ '创建时间' + team.createTime }}
        </div>
      </template>
      <template #footer>
        <van-button v-if="team.userId !== currentUser?.id" size="mini" plain type="primary"
                    @click="preJoinTeam(team)">加入队伍
        </van-button>
        <van-button v-if="team.userId === currentUser?.id" size="mini" plain type="primary"
                    @click="doUpdateTeam(team.id)">更新队伍
        </van-button>
        <van-button v-if="team.userId !== currentUser?.id" size="mini" plain type="danger"
                    @click="doQuitTeam(team.id)">退出队伍
        </van-button>
        <van-button v-if="team.userId === currentUser?.id" size="mini" plain type="danger"
                    @click="doDeleteTeam(team.id)">解散队伍
        </van-button>
      </template>
    </van-card>
    <van-dialog v-model:show="showInputPassword" title="密码" show-cancel-button @confirm="doJoinTeam" @cancel="doCancel">
      <van-field v-model="password" type="password"/>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import {TeamType} from "../models/team";
import {teamStatusEnum} from "../constants/team";
import myAxios from "../plugins/myAxios";
import {showFailToast, showSuccessToast} from "vant";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import {useRouter} from "vue-router";


interface TeamCardListProps {
  teamList: TeamType[];
}

const password = ref("")
const props = withDefaults(defineProps<TeamCardListProps>(), {
  //@ts-ignore
  teamList: [] as TeamType[],
});
const showInputPassword = ref<boolean>(false)
const joinTeamId = ref(0);
const preJoinTeam = (team: TeamType) => {
  joinTeamId.value = team.id;
  if (team.status === 0) {
    doJoinTeam()
  } else {
    showInputPassword.value = true;
  }
}
//队伍列表加入队伍
const doJoinTeam = async () => {
  if(!joinTeamId.value){
    return;
  }
  const res = await myAxios.post("/team/join", {
    teamId: joinTeamId.value,
    password:password.value,
  });
  if (res?.code === 0) {
    doCancel()
  } else {
    showFailToast("加入失败" + (res?.description ? `， ${res?.description} ` : ''));
  }
}
const doCancel = () => {
  password.value = '';
}
const currentUser = ref({});
onMounted(async () => {
  currentUser.value = await getCurrentUser();
  console.log(currentUser.value)
})

const router = useRouter();
/**
 * 跳转至更新页
 * @param id
 */
const doUpdateTeam = (id: number) => {
  router.push({
    path: '/team/update',
    query: {
      id,
    }
  })
}
const doQuitTeam = async (id: number) => {
  const res = await myAxios.post('/team/quit', {
    teamId: id
  })
  if (res?.code === 0) {
    showSuccessToast("操作成功")
  } else {
    showFailToast("操作失败")
  }
}
const doDeleteTeam = async (id: number) => {
  const res = await myAxios.post('/team/delete', {
    id: id
  })
  if (res?.code === 0) {
    showSuccessToast("操作成功")
  } else {
    showFailToast("操作失败")
  }
}
</script>

<style scoped>
#teamCardList :deep(.van-image__img) {
  height: 128px;
  object-fit: unset;
}
</style>